<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电梯监测</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        body { font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #f5f7fa; margin: 0; padding: 0; }
        .container { max-width: 1200px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,.08); padding: 32px 24px 24px 24px; }
        .title { font-size: 22px; font-weight: bold; color: #1565C0; margin-bottom: 24px; }
        .section { margin-bottom: 28px; }
        .el-card__header { font-size: 16px; font-weight: 600; color: #303133; }
        .el-button.center-text { display: flex !important; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; height: 28px; min-width: 80px; border-radius: 0; padding: 0 18px; line-height: 28px; }
        .alarm-section-card { border: 2px solid #F56C6C !important; background: #FEF0F0 !important; }
    </style>
</head>
<body>
    <div id="elevator-monitor">
        <div class="container">
            <div class="title"><i class='bx bx-building-house'></i> 电梯监测</div>
            <el-tabs v-model="activeTab">
                <!-- 1. 电梯列表 -->
                <el-tab-pane label="电梯列表" name="list">
                    <el-table :data="elevators" border stripe size="small">
                        <el-table-column prop="name" label="电梯名称" width="180"></el-table-column>
                        <el-table-column prop="location" label="安装位置"></el-table-column>
                        <el-table-column label="是否离线">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status==='离线'?'danger':'success'" size="mini">{{scope.row.status==='离线'?'是':'否'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否告警">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.alert ? 'danger' : 'success'" size="mini">{{scope.row.alert ? '是' : '否'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="140">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" class="center-text" @click="openBindDialog(scope.row)">绑定信息</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 绑定信息弹窗 -->
                    <el-dialog :visible.sync="bindDialogVisible" title="绑定信息配置" width="900px" append-to-body>
                        <el-form :model="bindForm" label-width="140px" size="small">
                            <el-form-item label="绑定电梯轿厢">
                                <el-select v-model="bindForm.car" placeholder="请选择电梯轿厢">
                                    <el-option v-for="car in allCars" :key="car" :label="car" :value="car"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绑定电梯机房">
                                <el-select v-model="bindForm.machineRoom" placeholder="请选择电梯机房">
                                    <el-option v-for="room in allMachineRooms" :key="room" :label="room" :value="room"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绑定空调控制器">
                                <div style="margin-bottom: 10px;">
                                    <el-button size="mini" type="primary" @click="showACDeviceSelector">
                                        <i class="el-icon-plus"></i> 选择空调设备
                                    </el-button>
                                </div>
                                <div v-if="bindForm.acDevice" style="border: 1px solid #EBEEF5; border-radius: 4px; padding: 15px; background: #FAFAFA;">
                                    <div style="font-weight: bold; color: #303133; margin-bottom: 15px;">空调设备配置</div>
                                    
                                    <!-- 温度配置 -->
                                    <el-form-item label="温度监测" label-width="100px" size="small">
                                        <el-row :gutter="12">
                                            <el-col :span="12">
                                                <el-form-item label="预警阈值" label-width="80px" size="small">
                                                    <el-input v-model="bindForm.acConfig.tempWarning" placeholder="如：35" style="width: 100%;">
                                                        <template slot="append">℃</template>
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="告警阈值" label-width="80px" size="small">
                                                    <el-input v-model="bindForm.acConfig.tempDanger" placeholder="如：45" style="width: 100%;">
                                                        <template slot="append">℃</template>
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <div style="display: flex; align-items: center; gap: 10px; margin-top: 5px;">
                                            <span style="font-size: 12px; color: #606266;">显示规则：</span>
                                            <el-tag type="success" size="mini">正常 - 绿色</el-tag>
                                            <el-tag type="warning" size="mini">预警 - 黄色</el-tag>
                                            <el-tag type="danger" size="mini">告警 - 红色</el-tag>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                            <el-form-item label="绑定底坑">
                                <el-select v-model="bindForm.pit" placeholder="请选择底坑">
                                    <el-option v-for="pit in allPits" :key="pit" :label="pit" :value="pit"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绑定集水井">
                                <div style="margin-bottom: 10px;">
                                    <el-button size="mini" type="primary" @click="showWellDeviceSelector">
                                        <i class="el-icon-plus"></i> 添加集水井设备
                                    </el-button>
                                </div>
                                <div v-for="(device, index) in bindForm.wellDevices" :key="index" style="border: 1px solid #EBEEF5; border-radius: 4px; padding: 12px; margin-bottom: 10px; background: #FAFAFA;">
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                                        <span style="font-weight: bold; color: #303133;">{{device.name}}</span>
                                        <el-button size="mini" type="danger" @click="removeWellDevice(index)">
                                            <i class="el-icon-delete"></i> 删除
                                        </el-button>
                                    </div>
                                    <el-row :gutter="12">
                                        <el-col :span="12">
                                            <el-form-item label="有效范围最小值" label-width="120px" size="small">
                                                <el-input v-model="device.minValue" placeholder="如：0" style="width: 100%;" @input="onWellRangeChange(index)">
                                                    <template slot="append">米</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="有效范围最大值" label-width="120px" size="small">
                                                <el-input v-model="device.maxValue" placeholder="如：10" style="width: 100%;" @input="onWellRangeChange(index)">
                                                    <template slot="append">米</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="12">
                                        <el-col :span="16">
                                            <el-form-item label="操作" label-width="50px" size="small">
                                                <el-button 
                                                    v-if="device.showRefreshButton" 
                                                    type="primary" 
                                                    size="small" 
                                                    @click="refreshWellEffectiveRange(index)"
                                                    style="margin-top: 8px;">
                                                    刷新有效范围
                                                </el-button>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="12">
                                        <el-col :span="24">
                                            <el-form-item label="预警范围显示" label-width="100px" size="small">
                                                <div style="display: flex; flex-direction: column; gap: 8px;">
                                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                                        <span style="font-size: 12px; color: #606266; min-width: 50px;">超低:</span>
                                                        <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraLow : "0 - 2"}} {{device.unit}}</span>
                                                        <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                                    </div>
                                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                                        <span style="font-size: 12px; color: #606266; min-width: 50px;">低:</span>
                                                        <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.low : "2 - 4"}} {{device.unit}}</span>
                                                        <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                                    </div>
                                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                                        <span style="font-size: 12px; color: #606266; min-width: 50px;">正常:</span>
                                                        <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.normal : "4 - 6"}} {{device.unit}}</span>
                                                        <span style="font-size: 12px; color: #67C23A;">绿色</span>
                                                    </div>
                                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                                        <span style="font-size: 12px; color: #606266; min-width: 50px;">高:</span>
                                                        <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.high : "6 - 8"}} {{device.unit}}</span>
                                                        <span style="font-size: 12px; color: #E6A23C;">黄色</span>
                                                    </div>
                                                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                                        <span style="font-size: 12px; color: #606266; min-width: 50px;">超高:</span>
                                                        <span style="font-size: 12px; color: #303133;">{{device.warningRanges ? device.warningRanges.ultraHigh : "8 - 10"}} {{device.unit}}</span>
                                                        <span style="font-size: 12px; color: #F56C6C;">红色</span>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="12">
                                        <el-col :span="24">
                                            <el-form-item label="预警值配置" label-width="100px" size="small">
                                                <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                                                    <input type="text" :id="'wellWarningValue1_' + index" placeholder="值1" value="0" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                                    <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                                    <input type="text" :id="'wellWarningValue2_' + index" placeholder="值2" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                                    <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                                    <input type="text" :id="'wellWarningValue3_' + index" placeholder="值3" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                                    <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                                    <input type="text" :id="'wellWarningValue4_' + index" placeholder="值4" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                                    <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                                    <input type="text" :id="'wellWarningValue5_' + index" placeholder="值5" style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px;" @input="onWellWarningValueInput(index)">
                                                    <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                                    <input type="text" :id="'wellWarningValue6_' + index" placeholder="值6" value="10" readonly style="width: 80px; height: 28px; padding: 0 8px; border: 1px solid #DCDFE6; border-radius: 4px; font-size: 12px; background-color: #F5F7FA;">
                                                    <span style="font-size: 12px; color: #606266;">{{device.unit}}</span>
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="12">
                                        <el-col :span="24">
                                            <el-form-item label="" label-width="100px" size="small">
                                                <el-button 
                                                    v-if="device.showWarningRefreshButton" 
                                                    type="success" 
                                                    size="small" 
                                                    @click="refreshWellWarningRanges(index)"
                                                    style="margin-top: 8px;">
                                                    刷新预警范围
                                                </el-button>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="bindDialogVisible=false">取 消</el-button>
                            <el-button type="primary" @click="saveBindInfo">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <!-- 2. 综合仪表盘 -->
                <el-tab-pane label="综合仪表盘" name="dashboard">
                    <div style="margin-bottom:18px;display:flex;align-items:center;gap:18px;">
                        <el-select v-model="dashboardElevators" placeholder="请选择电梯" style="width:320px;" @change="updateDashboardElevators">
                            <el-option label="全部" value="全部"></el-option>
                            <el-option v-for="e in elevators" :key="e.name" :label="e.name" :value="e.name"></el-option>
                        </el-select>
                        <el-select v-model="dashboardFilter" placeholder="请选择筛选条件" style="width:120px;" @change="updateDashboardFilter">
                            <el-option label="全部" value="全部"></el-option>
                            <el-option label="无告警" value="无告警"></el-option>
                            <el-option label="告警" value="告警"></el-option>
                        </el-select>
                        <span style="font-size: 12px; color: #909399;">提示：选择特定电梯时会自动调整状态筛选</span>
                    </div>
                    <div class="elevator-2d-list">
                        <div class="elevator-2d-cards">
                            <div v-for="item in filteredDashboardElevators" :key="item.name"
                                class="elevator-2d-card"
                                :class="[
                                    item.offline ? 'is-offline' : (item.alert ? 'is-alert' : (item.withPeople ? 'is-occupied is-normal' : 'is-normal'))
                                ]"
                                @dblclick="handleElevatorCardDoubleClick(item)"
                                style="cursor: pointer;">
                                <!-- 左侧：动态电梯井区 -->
                                <div class="elevator-shaft">
                                    <div class="shaft-track">
                                        <div v-for="n in item.totalFloors" :key="n" class="shaft-tick"
                                            :class="{'active': n === item.currentFloor}"></div>
                                    </div>
                                    <transition name="elevator-move">
                                        <div v-if="item.currentFloor" class="elevator-car"
                                            :style="{ bottom: ((item.currentFloor-1)/(item.totalFloors-1)*100)+'%' }">
                                            <i class="el-icon-box"></i>
                                            <!-- 上下行箭头 -->
                                            <transition name="arrow-fade">
                                                <i v-if="item.direction==='上行'" class="el-icon-caret-top shaft-arrow up"></i>
                                            </transition>
                                            <transition name="arrow-fade">
                                                <i v-if="item.direction==='下行'" class="el-icon-caret-bottom shaft-arrow down"></i>
                                            </transition>
                                        </div>
                                    </transition>
                                </div>
                                <!-- 右侧：信息区 -->
                                <div class="elevator-info">
                                    <div class="elevator-title-row">
                                        <span class="elevator-title">{{item.name}}</span>
                                        <i v-if="item.alert && !item.offline" class="el-icon-warning info-alert"></i>
                                        <i v-if="item.offline" class="el-icon-link info-offline"></i>
                                    </div>
                                    <div class="elevator-floor-row">
                                        <span class="elevator-floor">{{item.currentFloor ? item.currentFloor + 'F' : '--'}}</span>
                                        <span class="elevator-direction">{{item.direction}}</span>
                                    </div>
                                    <div class="elevator-status-row">
                                        <span class="elevator-user">
                                            <i class='bx bx-user' :class="{'user-on': item.withPeople, 'user-off': !item.withPeople}"></i>
                                            <span>{{item.withPeople ? '有人' : '无人'}}</span>
                                        </span>
                                    </div>
                                    <div class="elevator-tag-row">
                                        <span v-if="item.offline" class="elevator-tag tag-offline">[离线]</span>
                                        <span v-else-if="item.alert" class="elevator-tag tag-alert">[告警]</span>
                                        <span v-else class="elevator-tag tag-normal">[正常]</span>
                                        <span class="elevator-tag tag-hint">双击查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- 3. 设备详情监控 -->
                <el-tab-pane label="设备详情监控" name="device">
                    <el-select v-model="selectedElevator" placeholder="请选择电梯" style="margin-bottom:16px;width:220px;">
                        <el-option v-for="e in elevators" :key="e.name" :label="e.name" :value="e.name"></el-option>
                    </el-select>
                    <!-- 1. 电梯运行情况 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">电梯轿厢情况</div>
                        <el-row :gutter="16">
                            <el-col :span="8">当前楼层：{{getElevatorRunInfo(selectedElevator).floor}}</el-col>
                            <el-col :span="8">门状态：{{getElevatorRunInfo(selectedElevator).door}}</el-col>
                            <el-col :span="8">是否载人：{{getElevatorRunInfo(selectedElevator).withPeople}}</el-col>
                        </el-row>
                    </el-card>
                    <!-- 2. 空调运行情况 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header" style="display:flex;align-items:center;justify-content:space-between;">
                            <span>电梯空调运行情况</span>
                            <el-button size="mini" type="primary" @click="openACControlDialog">控制空调</el-button>
                        </div>
                        <el-row :gutter="16">
                            <el-col :span="6">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <span style="font-weight:bold;color:#303133;">轿厢温度：</span>
                                    <span style="font-weight:bold;color:#409EFF;">{{getElevatorACInfo(selectedElevator).carTemp}}</span>
                                    <el-tag 
                                        :type="getTempStatusColor(getElevatorACInfo(selectedElevator).carTemp)" 
                                        size="mini" 
                                        :style="getTempStatusColor(getElevatorACInfo(selectedElevator).carTemp) === 'warning' ? 'background-color: #FF8F00; border-color: #FF8F00; color: white;' : getTempStatusColor(getElevatorACInfo(selectedElevator).carTemp) === 'danger' ? 'background-color: #B71C1C; border-color: #B71C1C; color: white;' : ''">
                                        {{getTempStatusText(getElevatorACInfo(selectedElevator).carTemp)}}
                                    </el-tag>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <span style="font-weight:bold;color:#303133;">设定温度：</span>
                                    <span style="font-weight:bold;color:#67C23A;">{{getElevatorACInfo(selectedElevator).setTemp}}</span>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <span style="font-weight:bold;color:#303133;">电流：</span>
                                    <span style="font-weight:bold;color:#E6A23C;">{{getElevatorACInfo(selectedElevator).current}}</span>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <span style="font-weight:bold;color:#303133;">电压：</span>
                                    <span style="font-weight:bold;color:#909399;">{{getElevatorACInfo(selectedElevator).voltage}}</span>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <span style="font-weight:bold;color:#303133;">功率：</span>
                                    <span style="font-weight:bold;color:#F56C6C;">{{getElevatorACInfo(selectedElevator).power}}</span>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                    <!-- 空调控制弹窗 -->
                    <el-dialog :visible.sync="acControlDialogVisible" title="空调控制" width="400px" append-to-body>
                        <el-radio-group v-model="acControlType" style="margin-bottom:18px;">
                            <el-radio label="switch">控制开关</el-radio>
                            <el-radio label="temp">控制温度</el-radio>
                        </el-radio-group>
                        <div v-if="acControlType==='switch'">
                            <el-radio-group v-model="acSwitchValue">
                                <el-radio label="开">开</el-radio>
                                <el-radio label="关">关</el-radio>
                            </el-radio-group>
                        </div>
                        <div v-else-if="acControlType==='temp'">
                            <el-select v-model="acTempValue" placeholder="请选择温度" style="width:120px;">
                                <el-option v-for="n in 13" :key="n" :label="(n+17)+'℃'" :value="n+17"></el-option>
                            </el-select>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="acControlDialogVisible=false">取 消</el-button>
                            <el-button type="primary" @click="sendACControl">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 3. 电梯机房环境 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">电梯机房环境</div>
                        <el-row :gutter="16">
                            <el-col :span="12">温度：{{getMachineRoomEnv(selectedElevator).temp}}</el-col>
                            <el-col :span="12">湿度：{{getMachineRoomEnv(selectedElevator).humidity}}</el-col>
                        </el-row>
                    </el-card>
                    <!-- 4. 底坑环境 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">底坑环境</div>
                        <el-row :gutter="16">
                            <el-col :span="24">水浸情况：
                                <el-tag :type="getPitEnv(selectedElevator).waterLeak==='水浸'?'danger':'success'" size="mini">{{getPitEnv(selectedElevator).waterLeak}}</el-tag>
                            </el-col>
                        </el-row>
                    </el-card>
                    <!-- 5. 集水井液位和水泵情况 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">集水井信息</div>
                        <div v-for="well in getSumpWellInfo(selectedElevator)" :key="well.name" style="margin-bottom:18px;">
                            <div style="font-weight:bold;margin-bottom:6px;">{{well.name}} 液位：</div>
                            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
                                <!-- 下拉列表 -->
                                <el-select 
                                    v-model="well.liquidInput" 
                                    placeholder="选择液位值" 
                                    size="small" 
                                    style="width: 100px;"
                                    @change="updateWellLiquidFromSelect(well)">
                                    <el-option 
                                        v-for="value in liquidOptions" 
                                        :key="value" 
                                        :label="value + '米'" 
                                        :value="value.toString()">
                                    </el-option>
                                </el-select>

                                <div style="flex: 1; position: relative;">
                                    <span style="font-weight: bold; color: #303133; min-width: 60px;">
                                        {{getLiquidValue(well.liquid)}}米
                                    </span>
                                    <div style="flex: 1; position: relative;">
                                        <!-- 进度条背景 -->
                                        <div style="
                                            width: 100%;
                                            height: 20px;
                                            background: #F5F7FA;
                                            border-radius: 10px;
                                            position: relative;
                                            border: 1px solid #DCDFE6;
                                        ">
                                            <!-- 动态进度条 -->
                                            <div :style="{
                                                width: getLiquidPercentage(well.liquid) + '%',
                                                height: '100%',
                                                background: getLiquidStatusColor(well.liquid, well.name) === 'danger' ? '#F56C6C' : getLiquidStatusColor(well.liquid, well.name) === 'warning' ? '#E6A23C' : getLiquidStatusColor(well.liquid, well.name) === 'success' ? '#67C23A' : '#909399',
                                                borderRadius: '10px',
                                                position: 'absolute',
                                                left: '0',
                                                top: '0',
                                                transition: 'width 0.3s ease'
                                            }"></div>
                                            
                                            <!-- 当前值指示器 -->
                                            <div :style="{
                                                position: 'absolute',
                                                top: '-5px',
                                                left: getLiquidPercentage(well.liquid) + '%',
                                                transform: 'translateX(-50%)',
                                                width: '0',
                                                height: '0',
                                                borderLeft: '8px solid transparent',
                                                borderRight: '8px solid transparent',
                                                borderTop: '12px solid #303133',
                                                zIndex: '10'
                                            }"></div>
                                            <!-- 当前值标签 -->
                                            <div :style="{
                                                position: 'absolute',
                                                top: '-30px',
                                                left: getLiquidPercentage(well.liquid) + '%',
                                                transform: 'translateX(-50%)',
                                                background: '#303133',
                                                color: 'white',
                                                padding: '2px 6px',
                                                borderRadius: '4px',
                                                fontSize: '12px',
                                                whiteSpace: 'nowrap',
                                                zIndex: '10'
                                            }">
                                                {{getLiquidValue(well.liquid)}}米
                                            </div>
                                        </div>
                                        <!-- 刻度标记 -->
                                        <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #606266;">
                                            <span>0米</span>
                                            <span>2米</span>
                                            <span>4米</span>
                                            <span>6米</span>
                                            <span>8米</span>
                                            <span>10米</span>
                                        </div>
                                        <!-- 状态标签 -->
                                        <div style="display: flex; justify-content: center; margin-top: 2px; font-size: 10px;">
                                            <span :style="{
                                                background: getLiquidStatusColor(well.liquid, well.name) === 'danger' ? '#F56C6C' : 
                                                           getLiquidStatusColor(well.liquid, well.name) === 'warning' ? '#E6A23C' : 
                                                           getLiquidStatusColor(well.liquid, well.name) === 'success' ? '#67C23A' : '#909399',
                                                color: 'white',
                                                padding: '2px 6px',
                                                borderRadius: '4px',
                                                fontWeight: 'bold'
                                            }">
                                                {{getLiquidStatusText(well.liquid, well.name)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-table :data="well.pumps||[]" border stripe class="device-table" size="small">
                                <el-table-column prop="name" label="水泵名称" width="120"></el-table-column>
                                <el-table-column prop="status" label="水泵状态" width="120">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status==='启动'?'success':(scope.row.status==='停止'?'info':(scope.row.status==='告警'?'danger':'warning'))" size="mini">{{scope.row.status}}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mode" label="控制模式" width="100">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.row.mode" :type="scope.row.mode==='自动'?'success':'info'" size="mini">{{scope.row.mode}}</el-tag>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="temp" label="水泵温度"></el-table-column>
                                <el-table-column prop="noise" label="水泵噪声"></el-table-column>
                                <el-table-column prop="current" label="电流"></el-table-column>
                                <el-table-column prop="voltage" label="电压"></el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                    <!-- 6. 告警列表 -->
                    <el-card class="section alarm-section-card" shadow="hover" style="margin-bottom:0; border:2px solid #F56C6C; background:#FEF0F0;">
                        <div slot="header" style="color:#C62828; font-weight:bold; display:flex; align-items:center;"><i class="el-icon-warning-outline" style="margin-right:8px;"></i>告警列表</div>
                        <el-table :data="getElevatorAlerts(selectedElevator)" border stripe class="alert-table" size="small" @row-dblclick="handleAlertDoubleClick" style="cursor: pointer;">
                            <el-table-column prop="device" label="设备" width="120"></el-table-column>
                            <el-table-column prop="sensorName" label="传感器名称" width="150"></el-table-column>
                            <el-table-column prop="type" label="告警内容" min-width="200">
                                <template slot-scope="scope">
                                    <div style="display: flex; align-items: center; gap: 5px;">
                                        <span style="color: #F56C6C; font-weight: bold;">{{scope.row.type}}</span>
                                        <el-tag size="mini" type="info" style="font-size: 10px;">双击处理</el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status==='未处理'?'danger':'success'" size="mini">{{scope.row.status}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#elevator-monitor',
            data() {
                return {
                    activeTab: 'list',
                    elevators: [
                        { name: 'A1-1客', location: 'A1', status: '运行', alert: false, offline: false, currentFloor: 1, totalFloors: 20, direction: '上行', withPeople: true },
                        { name: 'A1-2客', location: 'A1', status: '运行', alert: false, offline: false, currentFloor: 11, totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A2-1客', location: 'A2', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A2-2客', location: 'A2', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A3-1客', location: 'A3', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A3-2客', location: 'A3', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A4-1客', location: 'A4', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A4-2客', location: 'A4', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A5-1客', location: 'A5', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A5-2客', location: 'A5', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A6-1边货', location: 'A6', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A6-江边货', location: 'A6', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A7-1客', location: 'A7', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A7-3客', location: 'A7', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false }
                    ],
                    dashboardElevators: '全部',
                    dashboardPeriod: 'day',
                    selectedElevator: '1号电梯',
                    runRecords: [
                        { time: '2024-06-01 08:00', event: '正常运行', operator: '系统' },
                        { time: '2024-06-01 09:30', event: '检修', operator: '张工' },
                        { time: '2024-06-01 10:10', event: '恢复运行', operator: '系统' },
                        { time: '2024-06-01 12:00', event: '告警停运', operator: '系统' }
                    ],
                    bindDialogVisible: false,
                    bindForm: {
                        car: '',
                        machineRoom: '',
                        ac: '',
                        pit: '',
                        sump: '',
                        acDevice: null, // 新增：空调设备
                        acConfig: { // 新增：空调配置
                            tempWarning: '',
                            tempDanger: ''
                        },
                        wellDevices: [], // 新增：集水井设备列表
                    },
                    allCars: ['轿厢A', '轿厢B'],
                    allMachineRooms: ['机房A', '机房B'],
                    allAcs: ['空调控制器A', '空调控制器B'],
                    allPits: ['底坑A', '底坑B'],
                    allSumps: ['集水井1', '集水井2'],
                    // 新增mock数据
                    elevatorRunInfo: {
                        'A1-1客': { floor: '1', door: '关闭', withPeople: '是' },
                        'A1-2客': { floor: '11', door: '开启', withPeople: '否' },
                        'A2-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A2-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A3-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A3-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A4-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A4-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A5-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A5-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A6-1边货': { floor: '-', door: '-', withPeople: '-' },
                        'A6-江边货': { floor: '-', door: '-', withPeople: '-' },
                        'A7-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A7-3客': { floor: '-', door: '-', withPeople: '-' }
                    },
                    elevatorACInfo: {
                        'A1-1客': { carTemp: '26℃', setTemp: '24℃', current: '2A', voltage: '220V', power: '0.5kW' },
                        'A1-2客': { carTemp: '25℃', setTemp: '23℃', current: '2.1A', voltage: '220V', power: '0.48kW' },
                        'A2-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A2-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A3-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A3-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A4-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A4-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A5-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A5-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A6-1边货': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A6-江边货': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A7-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A7-3客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' }
                    },
                    machineRoomEnv: {
                        'A1-1客': { temp: '32℃', humidity: '60%' },
                        'A1-2客': { temp: '31℃', humidity: '58%' },
                        'A2-1客': { temp: '-', humidity: '-' },
                        'A2-2客': { temp: '-', humidity: '-' },
                        'A3-1客': { temp: '-', humidity: '-' },
                        'A3-2客': { temp: '-', humidity: '-' },
                        'A4-1客': { temp: '-', humidity: '-' },
                        'A4-2客': { temp: '-', humidity: '-' },
                        'A5-1客': { temp: '-', humidity: '-' },
                        'A5-2客': { temp: '-', humidity: '-' },
                        'A6-1边货': { temp: '-', humidity: '-' },
                        'A6-江边货': { temp: '-', humidity: '-' },
                        'A7-1客': { temp: '-', humidity: '-' },
                        'A7-3客': { temp: '-', humidity: '-' }
                    },
                    pitEnv: {
                        'A1-1客': { waterLeak: '非水浸' },
                        'A1-2客': { waterLeak: '非水浸' },
                        'A2-1客': { waterLeak: '-' },
                        'A2-2客': { waterLeak: '-' },
                        'A3-1客': { waterLeak: '-' },
                        'A3-2客': { waterLeak: '-' },
                        'A4-1客': { waterLeak: '-' },
                        'A4-2客': { waterLeak: '-' },
                        'A5-1客': { waterLeak: '-' },
                        'A5-2客': { waterLeak: '-' },
                        'A6-1边货': { waterLeak: '-' },
                        'A6-江边货': { waterLeak: '-' },
                        'A7-1客': { waterLeak: '-' },
                        'A7-3客': { waterLeak: '-' }
                    },
                    sumpWells: {
                        'A1-1客': [
                            { name: '集水井1', liquid: '4.0米', liquidInput: '4.0', pumps: [
                                { name: '集水井水泵1', status: '启动', mode: '自动', temp: '32℃', noise: '40dB', current: '5A', voltage: '380V' },
                                { name: '集水井水泵2', status: '停止', mode: '手动', temp: '30℃', noise: '42dB', current: '0A', voltage: '380V' }
                            ]}
                        ],
                        'A1-2客': [
                            { name: '集水井1', liquid: '3.5米', liquidInput: '3.5', pumps: [
                                { name: '集水井水泵1', status: '启动', mode: '自动', temp: '31℃', noise: '41dB', current: '4.8A', voltage: '380V' }
                            ]}
                        ],
                        'A2-1客': [],
                        'A2-2客': [],
                        'A3-1客': [],
                        'A3-2客': [],
                        'A4-1客': [],
                        'A4-2客': [],
                        'A5-1客': [],
                        'A5-2客': [],
                        'A6-1边货': [],
                        'A6-江边货': [],
                        'A7-1客': [],
                        'A7-3客': []
                    },
                    acControlDialogVisible: false,
                    acControlType: '', // 'switch' or 'temp'
                    acSwitchValue: '',
                    acTempValue: null,
                    availableWellDevices: [
                        { name: '集水井1', description: '位于A1-1客机房附近' },
                        { name: '集水井2', description: '位于A1-2客机房附近' },
                        { name: '集水井3', description: '位于A2-1客机房附近' }
                    ],
                    selectedWellDeviceIndex: undefined,
                    liquidOptions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                    // 新增：告警数据
                    elevatorAlerts: {
                        'A1-1客': [
                            { device: '电梯轿厢', sensorName: '温度传感器A', type: '轿厢温度过高，当前温度32℃，超过设定阈值30℃', status: '未处理', time: '2024-06-01 10:30' },
                            { device: '电梯空调', sensorName: '空调控制器A', type: '空调运行异常，制冷效果不佳', status: '未处理', time: '2024-06-01 09:15' },
                            { device: '集水井1', sensorName: '液位传感器A', type: '集水井液位过高，当前液位8.5米，超过安全液位8.0米', status: '已处理', time: '2024-05-31 16:20' }
                        ],
                        'A1-2客': [
                            { device: '电梯轿厢', sensorName: '门传感器B', type: '电梯门开关异常，门无法正常关闭', status: '未处理', time: '2024-06-01 11:45' },
                            { device: '电梯机房', sensorName: '环境传感器B', type: '机房温度过高，当前温度38℃，超过设定阈值35℃', status: '未处理', time: '2024-06-01 10:20' }
                        ],
                        'A2-1客': [
                            { device: '电梯轿厢', sensorName: '运行传感器C', type: '电梯运行速度异常，当前速度0.8m/s，低于正常范围1.0-1.5m/s', status: '未处理', time: '2024-06-01 12:10' },
                            { device: '底坑', sensorName: '水浸传感器C', type: '底坑水浸告警，检测到积水', status: '未处理', time: '2024-06-01 08:30' }
                        ],
                        'A2-2客': [
                            { device: '电梯轿厢', sensorName: '载重传感器D', type: '电梯载重超限，当前载重950kg，超过额定载重800kg', status: '未处理', time: '2024-06-01 13:25' }
                        ],
                        'A3-1客': [
                            { device: '电梯轿厢', sensorName: '制动器传感器E', type: '制动器温度过高，当前温度85℃，超过安全温度80℃', status: '未处理', time: '2024-06-01 14:15' },
                            { device: '集水井1', sensorName: '水泵传感器E', type: '集水井水泵告警，无法正常启动', status: '已处理', time: '2024-05-31 17:30' }
                        ],
                        'A3-2客': [
                            { device: '电梯轿厢', sensorName: '钢丝绳传感器F', type: '钢丝绳张力异常，需要检查维护', status: '未处理', time: '2024-06-01 15:40' }
                        ],
                        'A4-1客': [
                            { device: '电梯轿厢', sensorName: '限速器传感器G', type: '限速器动作异常，需要检查', status: '未处理', time: '2024-06-01 16:20' }
                        ],
                        'A4-2客': [
                            { device: '电梯轿厢', sensorName: '安全钳传感器H', type: '安全钳状态异常，需要检查', status: '未处理', time: '2024-06-01 17:10' }
                        ],
                        'A5-1客': [
                            { device: '电梯轿厢', sensorName: '缓冲器传感器I', type: '缓冲器状态异常，需要检查', status: '未处理', time: '2024-06-01 18:05' }
                        ],
                        'A5-2客': [
                            { device: '电梯轿厢', sensorName: '平层传感器J', type: '平层精度异常，偏差超过±10mm', status: '未处理', time: '2024-06-01 19:30' }
                        ],
                        'A6-1边货': [
                            { device: '电梯轿厢', sensorName: '货梯传感器K', type: '货梯载重传感器告警，无法正常检测载重', status: '未处理', time: '2024-06-01 20:15' }
                        ],
                        'A6-江边货': [
                            { device: '电梯轿厢', sensorName: '货梯传感器L', type: '货梯门开关异常，门无法正常开启', status: '未处理', time: '2024-06-01 21:00' }
                        ],
                        'A7-1客': [
                            { device: '电梯轿厢', sensorName: '客梯传感器M', type: '客梯运行异常，需要检查', status: '未处理', time: '2024-06-01 22:30' }
                        ],
                        'A7-3客': [
                            { device: '电梯轿厢', sensorName: '客梯传感器N', type: '客梯门传感器告警，需要更换', status: '未处理', time: '2024-06-01 23:15' }
                        ]
                    },
                    dashboardFilter: '全部'
                }
            },
            computed: {
                filteredDashboardElevators() {
                    let filtered = this.elevators;
                    
                    // 根据电梯选择过滤
                    if (this.dashboardElevators && this.dashboardElevators !== '全部') {
                        filtered = filtered.filter(e => e.name === this.dashboardElevators);
                    }
                    
                    // 根据筛选条件过滤
                    if (this.dashboardFilter === '无告警') {
                        filtered = filtered.filter(e => !e.alert && !e.offline);
                    } else if (this.dashboardFilter === '告警') {
                        filtered = filtered.filter(e => e.alert || e.offline);
                    }
                    
                    return filtered;
                }
            },
            methods: {
                getRandom(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                },
                // 新增获取方法
                getElevatorRunInfo(name) {
                    return this.elevatorRunInfo[name] || { floor: '-', door: '-', withPeople: '-' };
                },
                getElevatorACInfo(name) {
                    return this.elevatorACInfo[name] || { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' };
                },
                getMachineRoomEnv(name) {
                    return this.machineRoomEnv[name] || { temp: '-', humidity: '-' };
                },
                getPitEnv(name) {
                    return this.pitEnv[name] || { waterLeak: '-' };
                },
                getSumpWellInfo(name) {
                    return this.sumpWells[name] || [];
                },
                getElevatorParams(name) {
                    if (!name) return [];
                    if (name === '1号电梯') return [
                        { param: '当前楼层', value: '5' },
                        { param: '运行速度', value: '1.5m/s' },
                        { param: '载重', value: '800kg' },
                        { param: '门状态', value: '关闭' }
                    ];
                    if (name === '2号电梯') return [
                        { param: '当前楼层', value: '1' },
                        { param: '运行速度', value: '1.5m/s' },
                        { param: '载重', value: '800kg' },
                        { param: '门状态', value: '开启' }
                    ];
                    if (name === '3号电梯') return [
                        { param: '当前楼层', value: 'B1' },
                        { param: '运行速度', value: '0m/s' },
                        { param: '载重', value: '0kg' },
                        { param: '门状态', value: '关闭' }
                    ];
                    return [];
                },
                getElevatorAlerts(name) {
                    return this.elevatorAlerts[name] || [];
                },
                openBindDialog(row) {
                    this.bindForm = {
                        car: '',
                        machineRoom: '',
                        ac: '',
                        pit: '',
                        sump: '',
                        acDevice: null, // 新增：空调设备
                        acConfig: { // 新增：空调配置
                            tempWarning: '35',
                            tempDanger: '45'
                        },
                        wellDevices: [], // 新增：集水井设备列表
                    };
                    this.bindDialogVisible = true;
                },
                saveBindInfo() {
                    // 验证空调设备配置
                    if (this.bindForm.acDevice && (!this.bindForm.acConfig.tempWarning || !this.bindForm.acConfig.tempDanger)) {
                        this.$message.warning('请完善空调设备的温度配置');
                        return;
                    }
                    
                    // 验证集水井设备配置
                    for (let device of this.bindForm.wellDevices) {
                        if (!device.minValue || !device.maxValue) {
                            this.$message.warning(`请完善集水井设备 ${device.name} 的有效范围配置`);
                            return;
                        }
                    }
                    
                    this.$message.success('保存成功（演示）');
                    this.bindDialogVisible = false;
                },
                openACControlDialog() {
                    this.acControlDialogVisible = true;
                    this.acControlType = '';
                    this.acSwitchValue = '';
                    this.acTempValue = null;
                },
                sendACControl() {
                    if (this.acControlType === 'switch') {
                        if (!this.acSwitchValue) {
                            this.$message.warning('请选择开或关');
                            return;
                        }
                        this.$message.success('已下发空调' + this.acSwitchValue + '指令（演示）');
                        this.acControlDialogVisible = false;
                    } else if (this.acControlType === 'temp') {
                        if (!this.acTempValue) {
                            this.$message.warning('请选择温度');
                            return;
                        }
                        this.$message.success('已下发设定温度' + this.acTempValue + '℃指令（演示）');
                        this.acControlDialogVisible = false;
                    } else {
                        this.$message.warning('请选择控制类型');
                    }
                },
                updateDashboardElevators(val) {
                    // 处理电梯选择逻辑
                    this.dashboardElevators = val;
                    
                    // 如果选择了特定电梯，自动调整状态筛选
                    if (val !== '全部') {
                        const selectedElevator = this.elevators.find(e => e.name === val);
                        if (selectedElevator) {
                            if (selectedElevator.alert || selectedElevator.offline) {
                                this.dashboardFilter = '告警';
                            } else {
                                this.dashboardFilter = '无告警';
                            }
                        }
                    } else {
                        // 如果选择全部，重置状态筛选为全部
                        this.dashboardFilter = '全部';
                    }
                },
                updateDashboardFilter(val) {
                    this.dashboardFilter = val;
                },
                showACDeviceSelector() {
                    this.$prompt('请输入空调设备名称', '选择空调设备', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPlaceholder: '如：空调控制器A',
                        inputValidator: (value) => {
                            if (!value) {
                                return '设备名称不能为空';
                            }
                            if (this.bindForm.wellDevices.some(d => d.name === value)) {
                                return '设备名称已存在';
                            }
                            return true;
                        }
                    }).then(({ value }) => {
                        this.bindForm.acDevice = value;
                    }).catch(() => {
                        // 取消选择
                    });
                },
                showWellDeviceSelector() {
                    const deviceList = this.availableWellDevices.map((device, index) => 
                        `<div style="padding: 8px; border: 1px solid #DCDFE6; border-radius: 4px; margin-bottom: 8px; cursor: pointer; background: #F5F7FA;" onclick="window.selectWellDevice(${index})">
                             <div style="font-weight: bold; color: #303133;">${device.name}</div>
                             <div style="font-size: 12px; color: #606266; margin-top: 4px;">${device.description}</div>
                         </div>`
                     ).join('');
                     
                     // 将设备列表存储到全局变量
                     window.availableWellDevicesList = this.availableWellDevices;
                     window.selectWellDevice = (index) => {
                         window.selectedWellDeviceIndex = index;
                         // 高亮选中的设备
                         const deviceElements = document.querySelectorAll('[onclick^="window.selectWellDevice"]');
                         deviceElements.forEach((el, i) => {
                             if (i === index) {
                                 el.style.background = '#409EFF';
                                 el.style.color = 'white';
                             } else {
                                 el.style.background = '#F5F7FA';
                                 el.style.color = 'inherit';
                             }
                         });
                     };
                     
                     this.$msgbox({
                         title: '选择集水井设备',
                         dangerouslyUseHTMLString: true,
                         message: `<p>请选择要添加的集水井设备：</p><div style="margin-top: 10px;">${deviceList}</div>`,
                         showCancelButton: true,
                         confirmButtonText: '确定',
                         cancelButtonText: '取消',
                         beforeClose: (action, instance, done) => {
                             if (action === 'confirm' && window.selectedWellDeviceIndex !== undefined) {
                                 const selectedDevice = window.availableWellDevicesList[window.selectedWellDeviceIndex];
                                 this.addWellDevice(selectedDevice);
                                 window.selectedWellDeviceIndex = undefined;
                                 window.availableWellDevicesList = undefined;
                                 window.selectWellDevice = undefined;
                                 done();
                             } else if (action === 'cancel') {
                                 window.selectedWellDeviceIndex = undefined;
                                 window.availableWellDevicesList = undefined;
                                 window.selectWellDevice = undefined;
                                 done();
                             } else {
                                 this.$message.warning('请先选择一个设备');
                             }
                         }
                     });
                 },
                 addWellDevice(device) {
                     this.bindForm.wellDevices.push({
                         name: device.name,
                         minValue: '0',
                         maxValue: '10',
                         unit: '米',
                         warningRanges: {
                             ultraLow: '0 - 2',
                             low: '2 - 4',
                             normal: '4 - 6',
                             high: '6 - 8',
                             ultraHigh: '8 - 10'
                         },
                         showRefreshButton: false,
                         showWarningRefreshButton: false
                     });
                 },
                removeWellDevice(index) {
                    this.$confirm(`确定要删除此集水井设备吗？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.bindForm.wellDevices.splice(index, 1);
                    }).catch(() => {
                        // 取消删除
                    });
                },
                onWellRangeChange(index) {
                    const device = this.bindForm.wellDevices[index];
                    if (device.minValue && device.maxValue) {
                        this.$set(device, 'showRefreshButton', true);
                    } else {
                        this.$set(device, 'showRefreshButton', false);
                    }
                },
                refreshWellEffectiveRange(index) {
                    const device = this.bindForm.wellDevices[index];
                    const minValue = parseFloat(device.minValue);
                    const maxValue = parseFloat(device.maxValue);
                    
                    if (isNaN(minValue) || isNaN(maxValue) || minValue >= maxValue) {
                        this.$message.error('请输入有效的范围值');
                        return;
                    }
                    
                    const range = maxValue - minValue;
                    const step = range / 5;
                    
                    device.warningRanges = {
                        ultraLow: `${minValue.toFixed(1)} - ${(minValue + step).toFixed(1)}`,
                        low: `${(minValue + step).toFixed(1)} - ${(minValue + step * 2).toFixed(1)}`,
                        normal: `${(minValue + step * 2).toFixed(1)} - ${(minValue + step * 3).toFixed(1)}`,
                        high: `${(minValue + step * 3).toFixed(1)} - ${(minValue + step * 4).toFixed(1)}`,
                        ultraHigh: `${(minValue + step * 4).toFixed(1)} - ${maxValue.toFixed(1)}`
                    };
                    
                    // 更新值1和值6的输入框
                    const value1Input = document.getElementById(`wellWarningValue1_${index}`);
                    const value6Input = document.getElementById(`wellWarningValue6_${index}`);
                    if (value1Input) value1Input.value = minValue.toFixed(1);
                    if (value6Input) value6Input.value = maxValue.toFixed(1);
                    
                    this.$set(device, 'showRefreshButton', false);
                    this.$message.success('有效范围已刷新，预警范围已更新');
                },
                onWellWarningValueInput(index) {
                    const device = this.bindForm.wellDevices[index];
                    const value2 = document.getElementById(`wellWarningValue2_${index}`).value;
                    const value3 = document.getElementById(`wellWarningValue3_${index}`).value;
                    const value4 = document.getElementById(`wellWarningValue4_${index}`).value;
                    const value5 = document.getElementById(`wellWarningValue5_${index}`).value;
                    
                    if (value2 && value3 && value4 && value5) {
                        this.$set(device, 'showWarningRefreshButton', true);
                    } else {
                        this.$set(device, 'showWarningRefreshButton', false);
                    }
                },
                refreshWellWarningRanges(index) {
                    const device = this.bindForm.wellDevices[index];
                    const value1 = parseFloat(document.getElementById(`wellWarningValue1_${index}`).value);
                    const value2 = parseFloat(document.getElementById(`wellWarningValue2_${index}`).value);
                    const value3 = parseFloat(document.getElementById(`wellWarningValue3_${index}`).value);
                    const value4 = parseFloat(document.getElementById(`wellWarningValue4_${index}`).value);
                    const value5 = parseFloat(document.getElementById(`wellWarningValue5_${index}`).value);
                    const value6 = parseFloat(document.getElementById(`wellWarningValue6_${index}`).value);
                    
                    if (isNaN(value1) || isNaN(value2) || isNaN(value3) || isNaN(value4) || isNaN(value5) || isNaN(value6)) {
                        this.$message.error('请输入有效的数值');
                        return;
                    }
                    
                    if (value1 >= value2 || value2 >= value3 || value3 >= value4 || value4 >= value5 || value5 >= value6) {
                        this.$message.error('数值必须按照递增顺序排列');
                        return;
                    }
                    
                    device.warningRanges = {
                        ultraLow: `${value1.toFixed(1)} - ${value2.toFixed(1)}`,
                        low: `${value2.toFixed(1)} - ${value3.toFixed(1)}`,
                        normal: `${value3.toFixed(1)} - ${value4.toFixed(1)}`,
                        high: `${value4.toFixed(1)} - ${value5.toFixed(1)}`,
                        ultraHigh: `${value5.toFixed(1)} - ${value6.toFixed(1)}`
                    };
                    
                    this.$set(device, 'showWarningRefreshButton', false);
                    this.$message.success('数值符合标准，预警范围已更新');
                },
                getTempStatusColor(temp) {
                    const numTemp = parseFloat(temp);
                    if (isNaN(numTemp)) return 'info';

                    if (numTemp < 20) return 'danger';
                    if (numTemp < 25) return 'warning';
                    if (numTemp < 30) return 'success';
                    return 'info';
                },
                getTempStatusText(temp) {
                    const numTemp = parseFloat(temp);
                    if (isNaN(numTemp)) return '未知';

                    if (numTemp < 20) return '过低';
                    if (numTemp < 25) return '正常';
                    if (numTemp < 30) return '过高';
                    return '正常';
                },
                getLiquidValue(liquid) {
                    // 处理百分比格式，如"40%"
                    if (typeof liquid === 'string' && liquid.includes('%')) {
                        const percentage = parseFloat(liquid.replace('%', ''));
                        if (!isNaN(percentage)) {
                            // 将百分比转换为米数（假设10米为100%）
                            return (percentage / 10).toFixed(1);
                        }
                    }
                    // 处理米格式，如"4.0米"
                    if (typeof liquid === 'string' && liquid.includes('米')) {
                        const meterValue = parseFloat(liquid.replace('米', ''));
                        if (!isNaN(meterValue)) {
                            return meterValue.toFixed(1);
                        }
                    }
                    const numLiquid = parseFloat(liquid);
                    if (isNaN(numLiquid)) return '0.0';
                    return numLiquid.toFixed(1);
                },
                getLiquidPercentage(liquid) {
                    // 处理百分比格式，如"40%"
                    if (typeof liquid === 'string' && liquid.includes('%')) {
                        const percentage = parseFloat(liquid.replace('%', ''));
                        if (!isNaN(percentage)) {
                            return Math.min(Math.max(0, percentage), 100);
                        }
                    }
                    // 处理米格式，如"4.0米"
                    if (typeof liquid === 'string' && liquid.includes('米')) {
                        const meterValue = parseFloat(liquid.replace('米', ''));
                        if (!isNaN(meterValue)) {
                            // 将米数转换为百分比（10米为100%）
                            return Math.min(Math.max(0, (meterValue / 10) * 100), 100);
                        }
                    }
                    const numLiquid = parseFloat(liquid);
                    if (isNaN(numLiquid)) return 0;
                    // 如果是米数，转换为百分比（假设10米为100%）
                    return Math.min(Math.max(0, (numLiquid / 10) * 100), 100);
                },
                getLiquidStatusColor(liquid, wellName) {
                    // 处理百分比格式，如"40%"
                    let percentage;
                    if (typeof liquid === 'string' && liquid.includes('%')) {
                        percentage = parseFloat(liquid.replace('%', ''));
                    } else if (typeof liquid === 'string' && liquid.includes('米')) {
                        const meterValue = parseFloat(liquid.replace('米', ''));
                        if (!isNaN(meterValue)) {
                            // 将米数转换为百分比（10米为100%）
                            percentage = (meterValue / 10) * 100;
                        } else {
                            percentage = 0;
                        }
                    } else {
                        const numLiquid = parseFloat(liquid);
                        if (isNaN(numLiquid)) return 'info';
                        // 如果是米数，转换为百分比（假设10米为100%）
                        percentage = (numLiquid / 10) * 100;
                    }
                    
                    if (isNaN(percentage)) return 'info';
                    
                    if (percentage < 20) return 'danger'; // 超低
                    if (percentage < 40) return 'warning'; // 低
                    if (percentage < 80) return 'success'; // 正常
                    if (percentage < 90) return 'warning'; // 高
                    return 'danger'; // 超高
                },
                getLiquidStatusText(liquid, wellName) {
                    // 处理百分比格式，如"40%"
                    let percentage;
                    if (typeof liquid === 'string' && liquid.includes('%')) {
                        percentage = parseFloat(liquid.replace('%', ''));
                    } else if (typeof liquid === 'string' && liquid.includes('米')) {
                        const meterValue = parseFloat(liquid.replace('米', ''));
                        if (!isNaN(meterValue)) {
                            // 将米数转换为百分比（10米为100%）
                            percentage = (meterValue / 10) * 100;
                        } else {
                            percentage = 0;
                        }
                    } else {
                        const numLiquid = parseFloat(liquid);
                        if (isNaN(numLiquid)) return '未知';
                        // 如果是米数，转换为百分比（假设10米为100%）
                        percentage = (numLiquid / 10) * 100;
                    }
                    
                    if (isNaN(percentage)) return '未知';
                    
                    if (percentage < 20) return '超低';
                    if (percentage < 40) return '低';
                    if (percentage < 80) return '正常';
                    if (percentage < 90) return '高';
                    return '超高';
                },
                updateWellLiquidFromSelect(well) {
                    // 下拉列表选择后更新液位值
                    const selectedValue = parseFloat(well.liquidInput);
                    if (!isNaN(selectedValue)) {
                        well.liquid = selectedValue + '米';
                    }
                },
                handleAlertDoubleClick(row) {
                    // 双击告警行，弹出提示并转跳到告警中心
                    this.$msgbox({
                        title: '告警处理',
                        message: `检测到告警：${row.type}\n\n需要转跳到告警中心的告警处理模块进行处理。\n\n是否立即转跳？`,
                        showCancelButton: true,
                        confirmButtonText: '立即转跳',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                // 转跳到告警中心的告警处理模块
                                this.jumpToAlarmCenter(row);
                                done();
                            } else {
                                done();
                            }
                        }
                    });
                },
                jumpToAlarmCenter(alert) {
                    // 转跳到告警中心的告警处理模块
                    this.$message({
                        message: `正在转跳到告警中心处理告警：${alert.device} - ${alert.type}`,
                        type: 'success',
                        duration: 3000
                    });
                    
                    // 这里可以添加实际的页面转跳逻辑
                    // 例如：window.location.href = '/alarm-center/process?alertId=' + alert.id;
                    // 或者使用路由：this.$router.push('/alarm-center/process');
                    
                    // 模拟转跳延迟
                    setTimeout(() => {
                        this.$message({
                            message: '已成功转跳到告警中心告警处理模块',
                            type: 'success',
                            duration: 2000
                        });
                    }, 1000);
                },
                handleElevatorCardDoubleClick(item) {
                    // 处理电梯卡片的双击事件
                    // 随机选择A1-1客或A1-2客进行展示
                    const randomElevators = ['A1-1客', 'A1-2客'];
                    const randomElevator = randomElevators[Math.floor(Math.random() * randomElevators.length)];
                    
                    this.selectedElevator = randomElevator;
                    this.activeTab = 'device';
                    
                    // 显示转跳提示
                    this.$message({
                        message: `已转跳到设备详情监控，显示电梯：${randomElevator}`,
                        type: 'success',
                        duration: 2000
                    });
                }
            },
            mounted() {
                this.dashboardRoom = this.rooms[0]?.name || '';
                this.selectedRoom = this.rooms[0]?.name || '';
                this.dashboardElevators = '全部'; // 设置默认值
                this.dashboardFilter = '全部'; // 设置默认筛选条件
                this.$nextTick(() => {
                    this.initDashboard();
                });
                this.animateDashboardNumbers();
            }
        });
    </script>
    <style scoped>
        .elevator-2d-list {
            margin-top: 10px;
        }
        .elevator-2d-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 18px;
        }
        .elevator-2d-label {
            width: 48px;
            font-size: 32px;
            color: #bdbdbd;
            font-weight: bold;
            text-align: center;
            margin-right: 18px;
            flex-shrink: 0;
        }
        .elevator-2d-cards {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
        }
        .elevator-2d-card {
            display: flex;
            align-items: center;
            background: #f8fafd;
            border-radius: 14px;
            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
            padding: 18px 28px 18px 18px;
            min-width: 270px;
            min-height: 120px;
            border: 2px solid #e3eaf2;
            transition: box-shadow 0.25s cubic-bezier(.4,2,.6,1), transform 0.18s cubic-bezier(.4,2,.6,1), border-color 0.3s;
            position: relative;
            overflow: hidden;
        }
        .elevator-2d-card:hover {
            box-shadow: 0 6px 24px 0 rgba(64,158,255,0.18);
            transform: scale(1.035);
            z-index: 2;
        }
        .elevator-2d-card.is-normal {
            border-color: #409EFF;
        }
        .elevator-2d-card.is-occupied {
            box-shadow: 0 0 0 2px #67C23A33;
        }
        .elevator-2d-card.is-alert {
            border-color: #F56C6C;
            animation: alert-glow 1.6s infinite alternate;
        }
        @keyframes alert-glow {
            0% { box-shadow: 0 0 0 0 #F56C6C33; }
            100% { box-shadow: 0 0 16px 4px #F56C6C66; }
        }
        .elevator-2d-card.is-offline {
            filter: grayscale(1);
            opacity: 0.6;
            border-color: #909399;
            pointer-events: none;
        }
        .elevator-shaft {
            width: 48px;
            height: 100px;
            margin-right: 18px;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .shaft-track {
            width: 10px;
            height: 100%;
            background: linear-gradient(180deg, #e3eaf2 60%, #b3d8ff 100%);
            border-radius: 6px;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 1;
        }
        .shaft-tick {
            width: 10px;
            height: 3px;
            background: #b3d8ff;
            opacity: 0.5;
            border-radius: 2px;
            margin: 1px 0;
        }
        .shaft-tick.active {
            background: #409EFF;
            opacity: 1;
            box-shadow: 0 0 6px #409EFF99;
        }
        .elevator-car {
            width: 32px;
            height: 24px;
            background: #409EFF;
            border-radius: 6px 6px 8px 8px;
            box-shadow: 0 2px 12px 0 #409EFF44;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: bottom 0.7s cubic-bezier(.4,2,.6,1);
            z-index: 2;
        }
        .elevator-car i.el-icon-box {
            font-size: 18px;
            color: #fff;
        }
        .elevator-car .shaft-arrow {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            color: #409EFF;
            text-shadow: 0 0 8px #b3d8ff;
            opacity: 0.85;
        }
        .shaft-arrow.up {
            top: -18px;
            animation: arrow-up 1.2s infinite alternate;
        }
        .shaft-arrow.down {
            bottom: -18px;
            animation: arrow-down 1.2s infinite alternate;
        }
        @keyframes arrow-up {
            0% { top: -18px; opacity: 0.7; }
            100% { top: -24px; opacity: 1; }
        }
        @keyframes arrow-down {
            0% { bottom: -18px; opacity: 0.7; }
            100% { bottom: -24px; opacity: 1; }
        }
        .elevator-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
        }
        .elevator-title-row {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            color: #1565C0;
            margin-bottom: 2px;
            gap: 8px;
        }
        .elevator-title {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .info-alert {
            color: #F56C6C;
            font-size: 22px;
            margin-left: 2px;
            animation: alert-glow 1.6s infinite alternate;
        }
        .info-offline {
            color: #909399;
            font-size: 22px;
            margin-left: 2px;
        }
        .elevator-floor-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 2px;
        }
        .elevator-floor {
            font-size: 28px;
            font-weight: bold;
            color: #409EFF;
            letter-spacing: 1px;
        }
        .elevator-direction {
            font-size: 15px;
            color: #1565C0;
            font-weight: 500;
        }
        .elevator-status-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 2px;
        }
        .elevator-user {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 15px;
        }
        .elevator-user .bx-user {
            font-size: 20px;
            vertical-align: middle;
            transition: color 0.3s;
        }
        .elevator-user .user-on {
            color: #409EFF;
            text-shadow: 0 0 8px #b3d8ff;
        }
        .elevator-user .user-off {
            color: #bdbdbd;
        }
        .elevator-tag-row {
            margin-top: 2px;
        }
        .elevator-tag {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 1px;
            margin-right: 6px;
        }
        .tag-normal {
            background: #e3f2fd;
            color: #409EFF;
            border: 1px solid #90caf9;
        }
        .tag-alert {
            background: #fff0f0;
            color: #F56C6C;
            border: 1px solid #F56C6C;
            animation: alert-glow 1.6s infinite alternate;
        }
        .tag-offline {
            background: #f5f7fa;
            color: #909399;
            border: 1px solid #bdbdbd;
        }
        .elevator-tag.tag-hint {
            background: transparent;
            color: #909399;
            border: none;
            font-size: 10px;
            margin-left: 8px;
            opacity: 0.7;
        }
    </style>
</body>
</html> 